<template>

	<div class="page">
		<div class="card" v-for="(value, key) in pics" :key="key">
			<div class="title">{{ value.title }}</div>
			<up-image :src="value.img" mode="widthFix" @click="uploadImg(key)"></up-image>
		</div>
		<up-button style="margin: 20px 0 30px;" type="primary" @click="save" :loading="loading" :disabled="loading">保存</up-button>
	</div>

	<up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import permitPic from '@/static/images/mine/driving_license_front.png'
import permitBackPic from '@/static/images/mine/driving_license_back.jpg'
import roadTransCertPic from '@/static/images/mine/road_transport.png'
import safePic from '@/static/images/mine/insurance_policy.png'
import { getCarInfo, editCar } from '@/api/car'
import {
	chooseImage, uploadFile, getImage
} from '@/api/file'



/* 数据 */
const uToastRef = ref<any>(null)
const loading = ref(false)
const info = reactive<any>({})
const pics = reactive({
	permitPic: {
		title: '行驶证正页',
		img: permitPic
	},
	permitBackPic: {
		title: '行驶证副页',
		img: permitBackPic
	},
	roadTransCertPic: {
		title: '道路运输证',
		img: roadTransCertPic
	},
	safePic: {
		title: '保险单',
		img: safePic
	}
})


/* 方法 */
// 获取车辆信息
const getCar = async () => {
	uToastRef.value.show({
		message: "正在获取车辆证件",
		type: 'loading',
		duration: -1
	})
	let res = await getCarInfo({ id: info.id })
	uToastRef.value.hide()
	if (res.success) {
		Object.assign(info, res.data)
		for (let key in pics) {
			if (info[key]) {
				await getPics(info[key], key)
			}
		}
	}
}
// 获取图片
const getPics = async (id:string, key:string) => {
	uToastRef.value.show({
		message: `正在获取${pics[key as keyof typeof pics].title}`,
		type: 'loading',
		duration: -1
	})
	let res = await getImage(id)
	uToastRef.value.hide()
	if (res.success) {
		pics[key as keyof typeof pics].img = res.data
	}
}
// 上传图片
const uploadImg = async (key:string) => {
	chooseImage().then(async (image) => {
		uToastRef.value.show({
			message: `正在上传`,
			type: 'loading',
			duration: -1
		})
		let res:any = await uploadFile(image, {
			licenseType: -1
		})
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: 'top',
				message: `上传成功`,
				type: 'success',
			})
			info[key as keyof typeof info] = res.data.fileId
			pics[key as keyof typeof pics].img = image
		}
	})
}
// 保存
const save = async () => {
	uToastRef.value.show({
		message: "正在保存",
		type: 'loading',
		duration: -1
	})
	loading.value = true
	let res = await editCar(info)
	loading.value = false
	if (res.success) {
		uToastRef.value.show({
			position: 'top',
			message: '保存成功',
			type: 'success'
		})
	} else {
		uToastRef.value.hide()
	}
}
// 初始化封装
const init = async () => {
	await getCar()
}



/* 钩子 */
onLoad(async (options: any) => {
	info.id = options.id
	await nextTick()
	await init()
})

</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f1f1f1;
	padding: 10px;

	.card {
		background: #fff;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 10px;

		.title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20px;
		}
	}
}
</style>
